<template>
    <el-dialog
        v-model="isShow"
        title="详情"
        width="90%"
        :before-close="handleClose"
        style="height:90%"
        top="3vh"
        :close-on-click-modal="false"
        @open="open"

    >
        <el-form label-width="200px">

            <el-scrollbar height="800px">
                <div class="title">
                    <el-row :gutter="24">
                        <el-col :span="1">
                            <div class="left-title">

                            </div>
                        </el-col>
                        <el-col :span="4">
                            {{ row!.order_state_text }}
                        </el-col>
                    </el-row>
                </div>

                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :timestamp="activity.timestamp"
                        :type="activity.type"
                    >
                        {{ activity.content }}
                    </el-timeline-item>
                </el-timeline>


                <el-divider content-position="left"><h4>用户信息</h4></el-divider>
                <el-form-item label="用户ID：">
                    {{ row!.user_id }}
                </el-form-item>
                <el-form-item label="用户昵称：">
                    {{ row!.user.nickname }}
                </el-form-item>
                <el-form-item label="用户手机号：">
                    {{ row!.user.mobile }}
                </el-form-item>
                <!--            <el-form-item label="上门联系人：">-->
                <!--                {{ row!.address_username }}-->
                <!--            </el-form-item>-->
                <!--            <el-form-item label="上门联系方式：">-->
                <!--                {{ row!.address_tel }}-->
                <!--            </el-form-item>-->
                <!--            <el-form-item label="上门服务地址：">-->
                <!--                {{ row!.address_content }}{{ row!.address_house }}-->
                <!--            </el-form-item>-->

                <el-divider content-position="left"><h4>技师信息</h4></el-divider>
                <el-form-item label="技师：">
                    {{ row!.technician.technician_name }}
                </el-form-item>
                <el-form-item label="技师头像：">
                    <el-image :src="fullUrl(row!.technician.avatar)" fit="fill"
                              style="width: 50px;height:50px"></el-image>
                </el-form-item>
                <el-form-item label="联系电话：">
                    {{ row!.technician.tel }}
                </el-form-item>
                <el-form-item label="技师接单上门时地址：">
                    {{ row!.technician_address }}
                </el-form-item>

                <el-divider content-position="left"><h4>订单信息</h4></el-divider>
                <el-form-item label="系统订单号：">
                    {{ row!.order_sn }}
                </el-form-item>
                <el-form-item label="下单时间：">
                    {{ row!.create_time }}
                </el-form-item>
                <el-form-item label="预约时间：">
                    {{ row!.service_start_time }}
                </el-form-item>
                <el-form-item label="服务时长：">
                    {{ row!.service.service_duration }}分钟
                </el-form-item>
                <el-form-item label="订单金额：">
                    <span>{{ row!.service_price_fare }}</span>
                </el-form-item>
                <el-form-item label="车费金额：">
                    <span>{{ row!.fare_price }}</span>
                </el-form-item>
                <el-form-item label="应付款金额：">
                    <span>{{ row!.service_total_price }}</span>
                </el-form-item>

                <div v-if="row!.pay_way != null">
                    <el-divider content-position="left"><h4>支付信息</h4></el-divider>
                    <el-form-item label="支付订单号：">
                        {{ row!.payment_order_sn }}
                    </el-form-item>
                    <el-form-item label="支付时间：">
                        {{ row!.payment_time }}
                    </el-form-item>
                    <el-form-item label="实付金额：">
                        <span>{{ row!.service_reality_price }}</span>
                    </el-form-item>
                    <el-form-item label="支付方式：">
                        <span v-if="row!.pay_way == 'wechat'">微信支付</span>
                        <span v-else-if="row!.pay_way == 'alipay'">支付宝支付</span>
                        <span v-else-if="row!.pay_way == 'balance'">余额支付</span>
                    </el-form-item>
                </div>

                <div v-if="row!.evaluate_state == 'Reviewed'">
                    <el-divider content-position="left"><h4>评价信息</h4></el-divider>
                    <el-form-item label="评分：">
                        {{ row!.evaluate.score }}
                    </el-form-item>
                    <el-form-item label="评价内容：">
                        {{ row!.evaluate.content }}
                    </el-form-item>
                    <el-form-item label="图片：">
                        <el-image
                            class="custom-img"
                            v-for="(item,index) in row!.evaluate.img" :src="item"
                            :key="index" fit="fill" style="width: 100px;height:100px"
                            :initial-index="index"
                            :preview-src-list=" row!.evaluate.img"></el-image>
                    </el-form-item>
                    <el-form-item label="评价时间：">
                        {{ row!.evaluate.create_time }}
                    </el-form-item>

                </div>


<!--                <div v-if="fareOrder != null">-->
<!--                    <el-divider content-position="left"><h4>附加订单-车费</h4></el-divider>-->
<!--                    <el-form-item label="订单号：">-->
<!--                        {{ fareOrder!.fare_order_sn }}-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="金额：">-->
<!--                        {{ fareOrder!.fare_price }}-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="状态：">-->
<!--                        <p v-if="fareOrder!.fare_state == 'ToBePaid'">未支付</p>-->
<!--                        <p v-if="fareOrder!.fare_state == 'Paid'">已支付</p>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="支付凭证：">-->
<!--                        <el-image-->
<!--                            class="custom-img"-->
<!--                            v-for="(item,index) in fareOrder!.fare_fare_price_imgs" :src="item"-->
<!--                            :key="index" fit="fill" style="width: 100px;height:100px"-->
<!--                            :initial-index="index"-->
<!--                            :preview-src-list="fareOrder!.fare_fare_price_imgs"></el-image>-->
<!--                    </el-form-item>-->
<!--                    <div v-show="fareOrder!.fare_technician_id != null">-->
<!--                        <el-form-item label="第三方交易订单号：">-->
<!--                            {{ fareOrder!.fare_technician_id }}-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="实际支付金额：">-->
<!--                            {{ fareOrder!.fare_pay_price }}-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="支付时间：">-->
<!--                            {{ fareOrder!.fare_pay_time }}-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="支付方式：">-->
<!--                            <span v-if="fareOrder.fare_pay_state == 'wechat'">微信支付</span>-->
<!--                            <span v-else-if="fareOrder!.fare_pay_state == 'alipay'">支付宝支付</span>-->
<!--                            <span v-else-if="fareOrder!.fare_pay_state == 'balance'">余额支付</span>-->
<!--                        </el-form-item>-->
<!--                    </div>-->

<!--                </div>-->
                <div v-if="row!.refund != null">
                    <el-divider content-position="left"><h4>退款订单</h4></el-divider>
                    <el-form-item label="第三方退款订单号：">
                        {{ row!.refund.refund_id }}
                    </el-form-item>
                    <el-form-item label="实际退款金额：">
                        {{ row!.refund.refund_amount }}
                    </el-form-item>
                    <el-form-item label="系统退款订单号：">
                        {{ row!.refund.out_trade_no }}
                    </el-form-item>
                    <el-form-item label="状态：">
                        <span v-if="row!.refund.state == 'NotRefund'">未退款</span>
                        <span v-else-if="row!.refund.state == 'Refunded'">已退款</span>
                    </el-form-item>
                    <el-form-item label="备注：">
                        {{ row!.refund.remarks }}
                    </el-form-item>
                </div>
                <div v-if="addClockOrder.length >0 ">
                    <el-divider content-position="left"><h4>附加订单-加钟</h4></el-divider>
                    <el-form-item label="订单号：">
                        <p class="add-clock-order-p" v-for="(item,index) in addClockOrder" :key="index">{{ item }}</p>
                    </el-form-item>
                </div>


                <el-divider content-position="left"><h4>服务内容</h4></el-divider>

                <el-table :data="TableData" stripe style="width: 99%" :header-cell-style="tableHeaderColor"
                >
                    <el-table-column prop="service_cover_img" label="服务封面">
                        <template #default="{row}">
                            <el-image :src="fullUrl(row.service_cover_img)" fit="fill"
                                      style="width: 50px;height:50px"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="service_name" label="服务名称"/>
                    <el-table-column prop="service_price" label="服务价格"/>
                    <el-table-column prop="service_duration" label="服务时长"/>
                    <el-table-column prop="service_num" label="服务数量"/>
                </el-table>
                <p>合计：{{ row!.service_num }}</p>

            </el-scrollbar>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
import {fullUrl} from "../../../utils/common";
import {getAddClockOrder, getFareOrder, getTimeline} from "/@/api/backend/order";

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    row: Object
})

const isShow = computed(() => {
    return props.isShow
})
const row = computed(() => {
    return props.row
})

const tableHeaderColor = () => {
    return {
        background: '#99a9bf',
        color: '#000'
    }
}
const TableData = ref()
const activities = ref()
const addClockOrder = ref([])
const fareOrder = ref()
const open = () => {
    console.log("isShow", isShow.value)
    console.log("row1", row.value)

    //获取时间线
    getTimeline({order_id: row.value.id}).then(res => {
        console.log("timeline", res)
        activities.value = res.data
    })

    getAddClockOrder({order_sn: row.value.order_sn}).then(res => {
        console.log("getAddClockOrder", res)
        addClockOrder.value = res.data
    })

    getFareOrder({order_id: row.value.id}).then(res => {
        console.log("getFareOrder", res)
        fareOrder.value = res.data
        console.log("getFareOrder.length", fareOrder.value)
    })

    let serviceArr = [];
    for (let i = 1; i <= row.value.service_num; i++) {
        serviceArr.push({
            service_name: row.value.service.service_name,
            service_price: row.value.service.service_price,
            service_duration: row.value.service.service_duration + "分钟",
            service_cover_img: row.value.service.service_cover_img,
            service_num: "x1",
        })
    }
    TableData.value = serviceArr

}
const emit = defineEmits(['close'])
const handleClose = () => {

    emit('close')
}


</script>


<style scoped lang="scss">
span {
    color: red;
}

.custom-img {
    margin-right: 10px;
}

.title {
    height: 60px;
    background: #FFF6F7;
    line-height: 60px;
    color: #000;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 99%;
}

.left-title {
    width: 5px;
    height: 60px;
    background: red;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.el-timeline {
    margin: 40px;
}

.add-clock-order-p {
    margin-right: 10px;
}
</style>
